<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">自提点名称:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">选择地区:</span>
      <v-distpicker 
          :province="province_name" 
          :city="city_name" 
          :area="area_name"
          @selected="onSelected"
          @province="onProvince"
          @city="onCity"
          @area="onArea"
          >
      </v-distpicker>
    </div>
    <!-- <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">城市:</span>
      <el-input class='flex-1' v-model="city_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">地区:</span>
      <el-input class='flex-1' v-model="area_value"></el-input>
    </div> -->
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">详细地址:</span>
      <el-input class='flex-1' v-model="address_value"></el-input>
    </div>

    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">修改自提点</el-button>
    </div>
  </div>
</template>

<script>
  import delivery_request from "@/api/delivery_request"
  import district from '../district'
  import VDistpicker from 'v-distpicker'
  export default {
    name: 'delivery_edit',
    data() {
      return {
        name_value: "",
        province_value: "",
        city_value: "",
        area_value: '',
        province_name: "",
        city_name: "",
        area_name: '',
        region_value: '',
        region_options: '',
        address_value: '',
        province_name: '',
        city_name: '',
        area_name: '',
      }
    },
    components: { VDistpicker },
    created() {
      this.get_delivery_detail(this.$route.query.id)
    },
    mounted() {
  
    },
    methods: {
      onSelected(data) {
        this.province_value = data.province.code;
        this.city_value = data.city.code;
        this.area_value = data.area.code;
        // this.ruleForm.province = this.province;
        // this.ruleForm.city = this.city;
        // this.ruleForm.area = this.area;
      },
      onProvince(e) {
        console.log(e);
      },
      onCity(e) {
        console.log(e);
      },
      onArea(e) {
        console.log(e);
      },
      get_delivery_detail(id) {
        let params = {
          id
        }
        delivery_request.detail_delivery(params, res=>{
          this.address_value = res.data.address
          this.province_name = district[100000][res.data.province]
          this.city_name = district[res.data.province][res.data.city] 
          this.area_name = district[res.data.city][res.data.area] 
          this.name_value = res.data.name
        })

      },
      edit_button() {
        if (this.name_value == '') {
          this.$message.error("请输入自提点名称")
          return
        }
        if (this.province_value == '') {
          this.$message.error("请选择地区")
          return
        }
        if (this.city_value == '') {
          this.$message.error("请选择地区")
          return
        }
        if (this.area_value == '') {
          this.$message.error("请选择地区")
          return
        }
        if (this.address_value == '') {
          this.$message.error("请输入详细地址")
          return
        }
        let params = {
          id: this.$route.query.id,
          name: this.name_value,
          province: this.province_value,
          city: this.city_value,
          area: this.area_value,
          address: this.address_value,
          // description: this.description_value,
          // url: this.url_value,
        }
        delivery_request.edit_delivery(params, res=> {
          this.$router.push('/shop/delivery')
        })
      }
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>